﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Easyui扩展库 Tree - 落阳 整理</title>
    <link href="http://www.easyui-extlib.com/Content/Site.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery/jquery-1.11.0.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-extensions/jquery.jdirk.js"></script>
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/tree/jeasyui.extensions.tree.dataPlain.js"></script>
    <script>
        $(function () {

            $("#treeOriginal").tree({
                loadFilter: $.fn.tree.extensions._loadFilter
            });

            $("#treeExtension").tree({
                dataPlain: true,
                parentField: "parendId"
            });

            var data1 = [
                { "id": "1", "text": "A" },
                { "id": "2", "text": "B" },
                { "id": "3", "text": "C" }
            ];

            $("#btnLoad_1_west").click(function () {
                $("#treeOriginal").tree("loadData", data1);
            });

            $("#btnLoad_1_east").click(function () {
                $("#treeExtension").tree("loadData", data1);
            });


            var data2 = [
                {
                    "id": "1", "text": "A",
                    "children":
                        [
                            { "id": "11", "text": "A1" },
                            { "id": "12", "text": "A2" },
                            { "id": "13", "text": "A3" }
                        ]
                },
                { "id": "2", "text": "B" },
                { "id": "3", "text": "C" }
            ];

            $("#btnLoad_2_west").click(function () {
                $("#treeOriginal").tree("loadData", data2);
            });

            $("#btnLoad_2_east").click(function () {
                $("#treeExtension").tree("loadData", data2);
            });



            var data3 = [
                { "id": "1", "text": "A" },
                { "id": "11", "text": "A1", "parendId": 1 },
                { "id": "12", "text": "A2", "parendId": 1 },
                { "id": "13", "text": "A3", "parendId": 1 },
                { "id": "2", "text": "B" },
                { "id": "3", "text": "C" }
            ];


            $("#btnLoad_3_west").click(function () {
                $("#treeOriginal").tree("loadData", data3);
            });

            $("#btnLoad_3_east").click(function () {
                //为不影响data3集合，先克隆data3
                var tempData = $.extend(true, {}, data3), lastData = [];
                for (var c in tempData) {
                    if ($.string.isNumeric(String(c))) { lastData.push(tempData[c]); }
                }
                $("#treeExtension").tree("loadData", lastData);

                console.log(data3);
                console.log(lastData);
            });

        });
    </script>
</head>
<body>
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'west',title:'源生tree',border:false" style="width:180px;border-right-width:1px;">
            <ul id="treeOriginal"></ul>
        </div>
        <div data-options="region:'center',border:false,title:'数据源'" style="padding:20px;">
            <div style="width:250px;height:180px;border:1px solid red;padding:10px;">
                最简单的数据源格式：
                <pre>
                [
                    { "id":"1","text":"A" },
                    { "id":"2","text":"B" },
                    { "id":"3","text":"C" }
                ]
                </pre>
                <a id="btnLoad_1_west" class="easyui-linkbutton" data-options="iconCls:'icon-add'">加载给 west 面板中的 tree（源生）</a>
                <br />
                <br />
                <a id="btnLoad_1_east" class="easyui-linkbutton" data-options="iconCls:'icon-add'">加载给 east 面板中的 tree（扩展）</a>
            </div>
            <br />
            <br />
            <br />
            <div style="width:330px;height:300px;border:1px solid red;padding:10px;">
                带层级的数据源格式：
                <pre>
                [
                    { "id":"1","text":"A",
                        "children":
                            [
                                { "id": "11", "text": "A1" },
                                { "id": "12", "text": "A2" },
                                { "id": "13", "text": "A3" }
                            ] 
                    },
                    { "id":"2","text":"B" },
                    { "id":"3","text":"C" }
                ]
                </pre>
                <a id="btnLoad_2_west" class="easyui-linkbutton" data-options="iconCls:'icon-add'">加载给 west 面板中的 tree（源生）</a>
                <br />
                <br />
                <a id="btnLoad_2_east" class="easyui-linkbutton" data-options="iconCls:'icon-add'">加载给 east 面板中的 tree（扩展）</a>
            </div>
            <br />
            <br />
            <br />
            <div style="width:330px;height:270px;border:1px solid red;padding:10px;">
                <span style="color:red;font-size:17px;">平滑数据源格式：</span>
                <pre>
                [
                    { "id":"1","text":"A" },
                    { "id": "11", "text": "A1", "parentId": "1" },
                    { "id": "12", "text": "A2", "parentId": "1" },
                    { "id": "13", "text": "A3", "parentId": "1" },
                    { "id":"2","text":"B" },
                    { "id":"3","text":"C" }
                ]
                </pre>
                <a id="btnLoad_3_west" class="easyui-linkbutton" data-options="iconCls:'icon-add'">加载给 west 面板中的 tree（源生）</a>
                <br />
                <br />
                <a id="btnLoad_3_east" class="easyui-linkbutton" data-options="iconCls:'icon-add'">加载给 east 面板中的 tree（扩展）</a>
            </div>
        </div>
        <div data-options="region:'east',title:'扩展后的tree',border:false" style="width:180px;border-left-width:1px;">
            <ul id="treeExtension"></ul>
        </div>
    </div>
</body>
</html>
